<template>
	<view class="index-page page">
		<CustomNav title="野生动物地图" :isBack="true"></CustomNav>
		<map :longitude="mapConf.longitude" :latitude="mapConf.latitude" :scale="mapConf.scale"
			:markers="mapConf.markers" id="map" @markertap="markertap"></map>
	</view>
</template>

<script>
	import {
		getAnimalMap
	} from '@/api/animal.js'
	export default {
		data() {
			return {
				mapConf: {
					longitude: 96.782163,
					latitude: 39.385032,
					scale: 9,
					markers: [
						// {
						// 	id: 1, // Number
						// 	title: '1', // String-标注点名
						// 	rotate: 0, // Number - 顺时针旋转的角度，范围 0 ~ 360，默认为 0
						// 	alpha: 1, // 默认1，无透明，范围 0 ~ 1
						// 	longitude: 94.876517,
						// 	latitude: 39.513232,
						// 	width: 30,
						// 	height: 36,
						// 	iconPath: 'https://www.mashangjiuye.cn/file/91885/dunhuang/lMkpNQQOqj.png', // 显示的图标
						// },
						// {
						// 	id: 1, // Number
						// 	title: '野生动物观察记录', // String-标注点名
						// 	rotate: 0, // Number - 顺时针旋转的角度，范围 0 ~ 360，默认为 0
						// 	alpha: 1, // 默认1，无透明，范围 0 ~ 1
						// 	longitude: 94.88,
						// 	latitude: 39.52,
						// 	width: 30,
						// 	height: 36,
						// 	iconPath: 'https://www.mashangjiuye.cn/file/91885/dunhuang/lMkpNQQOqj.png', // 显示的图标
						// }
					],
				},
				conf: {
					page: 1,
					limit: 20000
				},
			}
		},
		methods: {
			getMap() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getAnimalMap(this.conf).then(res => {
					let list = res;
					this.mapConf.markers = []
					list.forEach(async item => {
						let iconResult = await downloadFile(item.icon)
						this.mapConf.markers.push({
							id: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							title: item.name,
							iconPath: iconResult.tempFilePath,
							width: 30,
							height: 30
						})
					})
				}).catch((e) => {
					// this.showToast('加载失败', () => {
					// 	uni.navigateBack();
					// })
				})
				this.mapConf = wx.createMapContext('map') //map 组件的 id
				this.mapConf.addGroundOverlay({
					id: 1,
					src: "https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/map/shmap.png", //图层图片路径
					bounds: { //图片覆盖的经纬度范围
						southwest: { //西南角经纬度
							latitude: 38.977960,
							longitude: 95.705085,
						},
						northeast: { //东北角经纬度
							latitude: 39.645151,
							longitude: 97.477091,
						}
					},
					zIndex: 1,
				})
				// this.mapConf.addGroundOverlay({
				// 	id: 2,
				// 	src: "https://suzhou-polite-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/index/map6.png", //图层图片路径
				// 	bounds: { //图片覆盖的经纬度范围
				// 		southwest: { //西南角经纬度
				// 			latitude: 39.504345,
				// 			longitude: 98.329808,
				// 		},
				// 		northeast: { //东北角经纬度
				// 			latitude: 39.701984,
				// 			longitude: 98.51016,
				// 		}
				// 	},
				// 	zIndex: 1
				// })
			},
		},
		onLoad() {
			this.getMap()
		}
	}
</script>

<style lang="scss" scoped>
	.index-page {
		overflow: hidden;
		width: 100vw;
		height: 100vh;

		map {
			width: 100%;
			height: 100%;
		}

	}
</style>